<script lang="tsx">
import { defineComponent, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Bell } from '@vben/icons';
import { UserDropdown } from '@vben/layouts';
import loginTitle from '#/assets/images/login-title.png';
import { useMessage } from '#/hooks/useMessage';
import { useUserDropdown } from '#/hooks/useUserDropdown';
import { VbenIconButton } from '@vben-core/shadcn-ui';

export default defineComponent({
  name: 'CompetitionHeader',
  setup() {
    const { showDot } = useMessage();
    const router = useRouter();
    const route = useRoute();

    // 使用 UserDropdown hooks
    const {
      isLogin,
      userDropdownProps,
      handleLogout
    } = useUserDropdown({
      showPersonalCenter: true,
      showAdminMenu: route.path !== '/test/explainCore'
    });

    const handleTitleClick = () => {
      router.push({ path: '/competitionHomePage/competitionHomePageIndex', query: { matchId: route.query.matchId || route.params.compId } });
    };

    // 处理消息图标点击事件
    const handleMessageClick = () => {
      router.push('/lesson/personalCenter/userMessage');
    };

    // 判断菜单项是否为当前激活状态
    const isActiveRoute = (routePath: string) => {
      return route.path === routePath || route.path.startsWith(routePath + '/');
    };

    // 获取菜单项样式类
    const getMenuItemClass = (routePath: string) => {
      const baseClass = "px-4 py-2 text-sm rounded-lg transition-all duration-200 relative group";
      const activeClass = "font-medium";
      const inactiveClass = "text-gray-600";

      return `${baseClass} ${isActiveRoute(routePath) ? activeClass : inactiveClass}`;
    };

    return () => (
      <div class="bg-white border-b border-gray-200 shadow-sm">
        <div class="flex items-center justify-between h-16 px-4">
          {/* 左侧：Logo + 导航菜单 */}
          <div class="flex items-center space-x-8">
            {/* Logo区域 */}
            <div
              class="flex items-center px-3 h-full cursor-pointer transition-all duration-300 hover:bg-blue-50 rounded-lg"
              onClick={handleTitleClick}
            >
              <img src={loginTitle} alt="logo" class="h-10 w-10" />
              <span class="ml-3 text-lg font-semibold text-gray-800">
                产教融合云社区
              </span>
            </div>

            {/* 导航菜单 */}
            <nav class="hidden md:flex items-center space-x-1">
              <button
                class={getMenuItemClass('/competitionHomePage/competitionHomePageIndex')}
                onClick={() => router.push({ path: '/competitionHomePage/competitionHomePageIndex', query: { matchId: route.query.matchId || route.params.compId } })}
              >
                首页
                <span class={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600 transition-all duration-200 ${isActiveRoute('/competitionHomePage/competitionHomePageIndex') ? 'w-5' : 'w-0 group-hover:w-5'}`}></span>
              </button>
              <button
                class={getMenuItemClass('/competitionHomePage/contests')}
                onClick={() => router.push({ path: '/competitionHomePage/contests', query: { matchId: route.query.matchId || route.params.compId } })}
              >
                作品提交
                <span class={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600 transition-all duration-200 ${isActiveRoute('/competitionHomePage/contests') ? 'w-5' : 'w-0 group-hover:w-5'}`}></span>
              </button>
              <button
                class={getMenuItemClass('/competitionHomePage/competitionLives')}
                onClick={() => router.push({ path: '/competitionHomePage/competitionLives', query: { matchId: route.query.matchId || route.params.compId } })}
              >
                大赛动态
                <span class={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600 transition-all duration-200 ${isActiveRoute('/competition/teams') ? 'w-5' : 'w-0 group-hover:w-5'}`}></span>
              </button>
              <button
                class={getMenuItemClass('/competitionHomePage/competitionTraining')}
                onClick={() => router.push({ path: '/competitionHomePage/competitionTraining', query: { matchId: route.query.matchId || route.params.compId } })}
              >
                培训资料
                <span class={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600 transition-all duration-200 ${isActiveRoute('/competition/works') ? 'w-5' : 'w-0 group-hover:w-5'}`}></span>
              </button>
            </nav>
          </div>

          {/* 右侧：搜索框 + 消息通知 + 用户信息 */}
          <div class="flex items-center space-x-4">
            {/* 消息通知 */}
            {isLogin.value && (
              <VbenIconButton class="bell-button cursor-pointer text-foreground relative" onClick={handleMessageClick}>
                {showDot.value && <span class="bg-[#E5484D] absolute right-0.5 top-0.5 h-2 w-2 rounded"></span>}
                <Bell class="text-[24px]" />
              </VbenIconButton>
            )}

            {/* 用户下拉菜单 */}
            <UserDropdown {...userDropdownProps.value} onLogout={handleLogout} />
          </div>
        </div>
      </div>
    );
  },
});
</script>

<style lang="less" scoped>
/* Custom styles for Element Plus components that need deep styling */
:deep(.el-input__wrapper) {
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #d1d5db;
  transition: all 0.3s ease;

  &:hover {
    border-color: #60a5fa;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2);
  }

  &.is-focus {
    border-color: #3b82f6;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3);
  }
}

:deep(.el-input__suffix) {
  .el-button {
    border-radius: 0 9999px 9999px 0;
  }
}
</style>
